<!DOCTYPE html>
<meta charset="utf-8">
<title>geom.quadtree</title>
<style>
rect{
	fill: none;
	stroke: #000;
}
circle{
	fill: tomato;
}

</style>
<body>
<script src="../../d3.js"></script>
<script>
var width = 500, height = 600;
var svg = d3.select("body")
				.append("svg")
				.attr("width", width)
				.attr("height", height);

var data = [ [ 10, 10 ], [ 25, 15 ],[ 30, 50 ], [ 75, 80 ],[ 160, 160 ] ];
//var data = d3.range(100).map(function() {
//	  return [Math.random() * width, Math.random() * width];
//	});
var quadtree = d3.geom.quadtree()
						(data);

svg.append('g')
		.selectAll("rect")
		.data(nodes(quadtree))
		.enter()
		.append("rect")
		.attr("class", "node")
		.attr("x", function(d) { return d.x;} )
		.attr("y", function(d) { return d.y;} )
		.attr("width", function(d) { return d.width;} )
		.attr("height", function(d) { return d.height;} );

svg.append('g')
		.selectAll("circle")
		.data(nodes(quadtree))
		.enter().append("circle")
		.attr("cx", function(d) { return d.x; })
		.attr("cy", function(d) { return d.y; })
		.attr("r", 4);

function nodes(quadtree) {
	var nodes = [];
	quadtree.visit(function(node, x1, y1, x2, y2) {
		nodes.push({x: x1, y: y1, width: x2 - x1, height: y2 - y1});
	});
	
	return nodes;
}
</script>